<template>
	<view class="my-partner-item">
		<view class="my-partner-item__left">
			<u-avatar :size="88" :src="row[avatarImgField]"></u-avatar>
		</view>
		<view class="my-partner-item__content">
			<view class="content-item">
				<text class="label"></text>
				<text class="value">{{ row[nameField] }}</text>
			</view>
			<view class="content-item">
				<text class="label">身份：</text>
				<text class="value">{{ row[roleTextField] }}</text>
			</view>
			<view class="content-item">
				<text class="label">时间：</text>
				<text class="value">{{ row[timeField] }}</text>
			</view>
		</view>
		<view class="my-partner-item__right"  @click="openPopup">
			<view class="content-item">
				<u-icon name="edit-pen" color="#ED1B1B" size="28"></u-icon>
			</view>
			<view class="content-item">
				<text class="label">比例：</text>
				<text class="value">{{ row[ratioField] }}</text>
				<text class="value" v-if="row[ratioField]"></text>
			</view>
			<view class="content-item">
				<text class="label">状态：</text>
				<text class="value">{{ row[statusField] }}</text>
			</view>
		</view>
		<u-popup v-model="visible" mode="bottom">
			<view style="padding: 40rpx 40rpx;">
				<u-form :model="form" ref="uForm" label-width="160">
					<u-form-item label="分佣比例:">
						<u-input v-model="form.ratio" placeholder="请输入合伙人的分佣比例" />
						<text>%</text>
					</u-form-item>
					<u-form-item label="开启分佣:">
						<u-switch slot="right" :active-value="1" :inactive-value="0" active-color="#ff8200" v-model="form.status"></u-switch>
					</u-form-item>
				</u-form>
				<view class=" m-t-40 flex row-around">
					<u-button type="" size="medium " @click="cancel">取消</u-button>
					<u-button type="primary" size="medium " :custom-style="{background: '#ff8200', color: '#000000' }"	@click="submit">确定</u-button>
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import {
		editFounders,
	} from "@/api/user";
	
	// @todo 合伙人。
	export default {
		props: {
			row: {
				type: Object,
				default() {
					return {
						img: '',
						name: '',
						role_text: '合伙人',
						ratio: '',
						user_id: ''
					}
				}
			},
			// row 中 表示 头像的字段。
			avatarImgField: {
				type: String,
				default: 'avatar'
			},
			// row 中 表示 用户名称的字段。
			nameField: {
				type: String,
				default: 'nickname'
			},
			// row 中 表示 身份角色 的字段
			roleTextField: {
				type: String,
				default: 'founder_text'
			},
			// row 中 表示 时间的字段
			timeField: {
				type: String,
				default: 'join_time'
			},
			ratioField: {
				type: String,
				default: 'ratio'
			},
			statusField: {
				type: String,
				default: 'status_text'
			}
		},
		data() {
			return {
				visible: false,
				form: {
					ratio: '',
					status: false,
					member_user_id: ''
				}
			}
		},
		methods: {
			openPopup() {
				let ratio = this.row[this.ratioField]
				if (ratio) {
					ratio = ratio.replace('%', '')
				}
				if (ratio === '-') {
					ratio = ''
				}
				this.form = {
					ratio: ratio,
					// 开关状态 如果没有，应该有个默认状态，这里默认是 0
					status: (this.row[this.statusField] == '-' || this.row[this.statusField] == 0) ? false : true,
					member_user_id: this.row.user_id
				}
				this.visible = true
			},
			cancel() {
				this.form = {
					ratio: '',
					status: false
				}
				this.visible = false
			},
			// 在这里提交设置
			submit() {
				// 先拷贝一份数据出来，防止被改。
				const form = JSON.parse(JSON.stringify(this.form))
				
				if(!form.ratio || Number(form.ratio) >100 ){
					this.$toast({
						title: "比例不能大于100%",
					});
					return
				}
				// 这里发请求。
				editFounders({
					ratio: this.form.ratio,
					status: this.form.status === true ? 1 : 0,
					member_user_id: this.form.member_user_id,
				})
				.then(res => {
					// this.form 里是用户设置的比例，状态。结束后，要把 this.visible 设为 false
					this.visible = false
					
					// 提交结束后 数据恢复 初始值
					this.row[this.ratioField] = form.ratio
					this.row[this.statusField] = form.status ? 1 : 0
					
					this.form = {
						ratio: '',
						status: false
					}
					
					this.$emit('upCallback', {num: 1, size: 10})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.my-partner-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 15rpx;
	margin: 20rpx 0;
	background: #FFFFFF;
	border-radius: 20rpx;
	
}
.my-partner-item__left {
	padding: 20rpx;
}
.my-partner-item__content {
	flex: 1;
	
}
.my-partner-item__right {
	// width: 210rpx;
	padding-right: 60rpx;
	.ratio-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
}
.content-item {
	margin: 10rpx 0;
}
.label {
	color: #8E8B8B;
	font-size: 26rpx;
	font-weight: 500;
}
.value {
	color: #333333;
	font-size: 26rpx;
	font-weight: 500;
}
</style>
